<script setup>

import axios from "axios";

// 导入自定义的http工具类
// import http from './util/http/index.js'
// 或者简写
import http from './util/http'


// 配置默认值
const instance = axios.create({
  baseURL: "http://localhost:8080",
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
})

function getInfo(){
  // 这个后端接口需要支持跨域，即配置“CorsConfig”
  axios.get("http://localhost:8080/get/1").then(resp => {
    console.log(resp.data);
    // config: 请求配置
    // data: 服务器的响应数据
    // headers：响应头
    // request: 请求对象
    // status：响应状态码
    // statusText：响应描述文本
  })

}

function getInfoParam(){
  axios.get("http://localhost:8080/get/1?id=1&name=zhangsan").then(resp => {
    console.log(resp.data);
    // config: 请求配置
    // data: 服务器的响应数据
    // headers：响应头
    // request: 请求对象
    // status：响应状态码
    // statusText：响应描述文本
  })
}

function getInfoParam2(){
  // 该参数会拼接到url后面
  axios.get("http://localhost:8080/get/1", {
    params:{
      id:1,
      name:"zhangsan"
    }
  }).then(resp => {
    console.log(resp.data);
    // config: 请求配置
    // data: 服务器的响应数据
    // headers：响应头
    // request: 请求对象
    // status：响应状态码
    // statusText：响应描述文本
  })
}

function postInfo(){
  axios.post("http://localhost:8080/update2").then(resp => {
    console.log(resp);
  })
}

function postInfoParam(){
  // 该参数会自动转成json字符串
  axios.post("http://localhost:8080/update2", {
    id:1,
    name:"zhangsan"
  }).then(resp => {
    console.log(resp);
  })


}
function postInfoParamDefault(){
  // 该参数会自动转成json字符串
  instance.post("/update2", {
    id:1,
    name:"zhangsan"
  }).then(resp => {
    console.log(resp);
  })
}

function postInfoParamUtil(){
  // 该参数会自动转成json字符串
  http.post("/update2", {
    id:1,
    name:"zhangsan"
  }).then(resp => {
    console.log(resp);
  })
}

function delay2(){
  // 自己手动处理异常
  // 该接口会延时2s返回
  http.get("http://localhost:8080/delay/2").then(resp => {
    console.log(resp);
  }).catch(err => {
    console.log("网络超时");
    console.log(err);
  })
}

function delay2Inteceptor(){
  // 自己手动处理异常
  http.get("http://localhost:8080/delay/2").then(resp => {
    console.log(resp);
  })
}

</script>

<template>

  <button @click="getInfo">GET 请求</button>
  <button @click="getInfoParam">GET 请求 参数</button>
  <button @click="getInfoParam2">GET 请求 参数2</button>
  <button @click="postInfo">POST 请求</button>
  <button @click="postInfoParam">POST 请求 参数</button>
  <button @click="postInfoParamDefault">POST 请求 参数-使用默认实例</button>
  <button @click="postInfoParamUtil">POST 请求 参数-使用工具类</button>
  <button @click="delay2">delay 2s</button>
  <button @click="delay2Inteceptor">delay 2s-inteceptor</button>
</template>

<style scoped>
</style>
